<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{margin:0;padding:0;}
		a{text-decoration:none;}
		#win{width:730px;height:454px;position:relative;margin:0 auto;border:5px solid #999;}
		img{width:730px;height:454px;display:block;}
		#win-img{position:relative;width:730px;height:454px;}
		#win-img li{position:absolute;left:0;top:0;opacity:0;list-style:none;}
		#win-img .first{opacity:1;background:#ccc;}
		
        	#box{display:none; position:absolute; top:200px; width:730px;}
			#box .a1{ width:30px; height:60px; float:left; background:rgba(0,0,0,.2); line-height:60px; text-align:center;}
			#box .a2{ width:30px; height:60px; float:right; background:rgba(0,0,0,.2);line-height:60px; text-align:center;}
			#win-btn{ width:300px; height:30px; position:absolute; top:400px; left:200px;}
			#win-btn li{ float:left; list-style:none;}
			#win-btn li a{ display:block; width:20px; text-align:center; line-height:20px; color:#fff; margin-left:30px; height:20px; background:#999; border-radius:50%;}
			#win-btn li .active{ background:#f00;}
		</style>
	</head>
	<script src="js/jquery.js"></script>
	<script>
	(function($){
		$(function(){
			
			$('#win').mouseover(function(){
				$('#box').css('display','block')
				clearInterval(timer)
			})
			$('#win').mouseout(function(){
				timer=setInterval(move,3000)
				$('#box').css('display','none')
			})
			$('#win-btn li a').mouseover(function(){
				
				i=$(this).text()-2;
				move();
			})
			$('#box .a1').click(function(){
				i-=2;
				move();
			})
			$('#box .a2').click(function(){
				move();
			})
			var i=0;
			function move(){
				i++;
				$('#win-img li').stop(true).animate({opacity:0},500).eq(i%6).stop().animate({opacity:1});
				$('#win-btn li a').removeClass();
				$('#win-btn li a').eq(i%6).addClass('active');
			}
			var timer=setInterval(move,3000)
		})
	}(jQuery))
	</script>
	<body>
		<div id="win">
			<ul id="win-img">
				<li class="first"><img src="img/1.jpg" alt="" /></li>
				<li><img src="img/2.jpg" alt="" /></li>
				<li><img src="img/3.jpg" alt="" /></li>
				<li><img src="img/4.jpg" alt="" /></li>
				<li><img src="img/5.jpg" alt="" /></li>
				<li><img src="img/6.jpg" alt="" /></li>
			</ul>
			<ul id="win-btn">
				<li><a class="active" href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">6</a></li>
			</ul>
			<div id="box">
				<a class="a1" href="#"><</a>
				<a class="a2" href="#">></a>
			</div>
		</div>
	</body>
</html>
